<template>
	<div class="menu_seven">
		<ol>
			<li v-for="item in list" :key="item.id">
				<p>
					<img :src="item.img"/>
				</p>
				<aside>
					<span>{{item.title}}</span>
					<p>{{item.txt}}</p>
					<label>￥{{item.price}}</label><a>起</a>
					<em>{{item.time}}</em>
				</aside>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Menu_seven',
		data(){
			return{
				list:[
					{id:1,img:'sevenimg/1.jpg',title:'南麋岛',txt:'[三峡秋摄]11月秋色三峡红叶季火热！摄长江三峡秋景精华，三峡人家-大面山-巫山神女湾-夔门，从雄伟到柔情，7日摄影创作团！',price:'2670',time:'5天4晚'},
					{id:2,img:'sevenimg/2.jpg',title:'浙江',txt:'[坝上冬牧 • 雪原摄影]12-2月 北京/赤峰出发 全景坝上雪原-马踏飞雪-蒙古人文-牧归场景-暖水魔界日出-雪域奔驼-蛤蟆坝光影-蓝冰摄影 坝上冬摄6日创作团',price:'1980',time:'7天6晚'},
					{id:3,img:'sevenimg/3.jpg',title:'航海',txt:'[中越边境摄影7日]12月-3月暖冬广西：魅力涠洲岛-田园靖西-渠洋湖日出-壮观德天瀑布-明仕田园日出-鹅泉日落-五彩滩日出-北部湾虾灯光影-独特京族高跷',price:'2850',time:'5天4晚'},
					{id:4,img:'sevenimg/4.jpg',title:'多地出发',txt:'[海南环岛摄影8日 ]三亚亚龙湾-万宁日月湾清水湾山钦湾-昌江棋子湾--儋州火山海岸-博鳌红石滩-千年古盐田-白马井鱼港渔市-新村港疍家鱼排',price:'1080',time:'4天3晚'},
					{id:5,img:'sevenimg/5.jpg',title:'杭州出发',txt:'[内测邀请·牛背山摄影4日]12.25名额暂满，阔别六载，牛背山内测；牛背山星辰营地-双流彭镇老茶馆-荥经砂锅，无需徒步上山，4日精品摄影团。',price:'3980',time:'5天4晚'},
					{id:6,img:'sevenimg/6.jpg',title:'平坦出发',txt:'[中国人文图鉴·滇西摄影]8个少数民族深度人文/彝族-傈僳族-怒族-独龙族-藏族-纳西族-普米族-白族/室内环境人像/多彩民族服饰/非遗项目纪录/滇西9日环线创作之旅',price:'6522',time:'6天5晚'},
					{id:7,img:'sevenimg/7.jpg',title:'三亚出发',txt:'[中国人文图鉴·滇西摄影]8个少数民族深度人文/彝族-傈僳族-怒族-独龙族-藏族-纳西族-普米族-白族/室内环境人像/多彩民族服饰/非遗项目纪录/滇西9日环线创作之旅',price:'4980',time:'6天5晚'},
					{id:8,img:'sevenimg/8.jpg',title:'厦门出发',txt:'[贝加尔湖 • 蓝冰摄影]2020北京直飞蓝冰季摄影，伊尔库茨克-奥利洪岛-利斯特维扬卡，奥利洪岛南北线，蓝冰、冰洞、冰泡，俄罗斯贝加尔湖冬日摄影6/7日之旅',price:'2680',time:'5天4晚'},
					{id:9,img:'sevenimg/9.jpg',title:'万宁出发',txt:'[新西兰秋摄]2021.4 金秋纯净新西兰，奥克兰-萤火虫洞-霍比特村-基督城-提卡波湖-箭镇-皇后镇，南北岛风光摄影12日团！',price:'3880',time:'6天5晚'},
					{id:10,img:'sevenimg/10.jpg',title:'厦门出发',txt:'[火山摄影 • 爪哇巡礼]国内首款印尼火山摄影线，布罗莫火山日出-宜珍火山魔幻蓝焰-爪哇人像摄影-帕布玛落日潮汐-私藏魔幻森林-马达将军瀑布，最美火山线7日6晚影像之旅',price:'390',time:'2天1晚'},
				]
			}
		}
	}
</script>

<style scoped>
	.menu_seven{
		width: 100%;
		overflow: hidden;
		background-color: #efefef;
	}
	
	.menu_seven li{
		background-color: #ffffff;
		width: 48%;
		float: left;
		margin: 1%;
		border-radius: 0.5rem;
		margin-top: 0.5rem;
	}
	.menu_seven li:nth-of-type(even){
		margin-top: 1.5rem;
	}
	.menu_seven p{
		text-align: center;
	}
	.menu_seven li img{
		
		text-align: center;
		width: 96%;
		height: 10rem;
		border-radius: 0.5rem;
	}
	
	.menu_seven aside{
		margin: 0 auto;
		width: 96%;
		position: relative;
		height: 5rem;
	
	}
	.menu_seven aside span{
		width: 5rem;
		margin-left: 0.5rem;
		position: absolute;
		left:-0.5rem;
		bottom: 13.1rem;
		background-color: rgba(0,0,0,0.6);
		display: block;
		text-align: center;
		color: white;
		border-radius: 0.4rem 0 0.6rem 0;
		font-size: 0.5rem;
		line-height: 2rem;
		
	}
	.menu_seven aside p{
		display: -webkit-box;
		-webkit-line-clamp: 2;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding-top: 0.2rem;
		font-weight: bolder;
	}
	
	.menu_seven aside label{
		margin-top: 1rem;
		display: inline-block;
		color: #ffa500;
		font-weight: bolder;
	}
	.menu_seven aside a{
		color: #808080;
		font-size: 0.8rem;
		
	}
	.menu_seven aside em{
		float: right;
		margin-top: 1.2rem;
		color: #808080;
		font-size: 0.5rem;
	}
</style>
